---
title: 編集履歴
icon: '#pro/History'
---

<MetaData
  lang="ja-JP"
  isPro
  meta={{
    preset: [{
      client: '@univerjs/preset-docs-collaboration',
      locale: '@univerjs/preset-docs-collaboration/locales/en-US',
      style: '@univerjs/preset-docs-collaboration/lib/index.css',
    }],
    plugins: [{
      client: '@univerjs-pro/edit-history-loader',
    }, {
      client: '@univerjs-pro/edit-history-viewer',
      facade: '@univerjs-pro/edit-history-viewer/locale/en-US',
      style: '@univerjs-pro/edit-history-viewer/lib/index.css',
    }],
    server: 'Yes',
  }}
/>

<Callout type="warning" title="注意事項事項">
  編集履歴機能には Univer サーバーのサポートが必要です。Univer サーバーが正しくインストール・設定されていることを確認してください。詳細は [Pro へのアップグレード](/guides/pro) を参照してください。
</Callout>

編集履歴は、ドキュメントの過去バージョンを閲覧・復元できる機能です。さまざまなフィルターや検索方法をサポートし、ドキュメント内容を効率的に管理するのに役立ちます。

<Callout type="warning" title="注意事項">
  編集履歴機能は、履歴の読み込みと表示のために独立した Univer インスタンスを作成します。履歴用の Univer インスタンスを操作または設定（インターフェースのリクエスト ヘッダーの変更、プラグイン登録など）する必要がある場合は、[編集履歴用の Univer インスタンスを取得](#get-edit-history-univer-instance) を参照してください。
</Callout>

## プリセットモード

### インストール

<Callout>
  `@univerjs/preset-sheets-advanced` の `UniverSheetsAdvancedPreset` は、実行時に `UniverSheetsDrawingPreset` に依存します。先に `@univerjs/preset-sheets-drawing` をインストールしてください。
</Callout>

```package-install
npm install @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced
```

### 使い方

```typescript
import { UniverSheetsAdvancedPreset } from '@univerjs/preset-sheets-advanced' // [!code ++]
import UniverPresetSheetsAdvancedEnUS from '@univerjs/preset-sheets-advanced/locales/en-US' // [!code ++]
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { UniverSheetsDrawingPreset } from '@univerjs/preset-sheets-drawing' // [!code ++]
import UniverPresetSheetsDrawingEnUS from '@univerjs/preset-sheets-drawing/locales/en-US' // [!code ++]
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-sheets-core/lib/index.css'
import '@univerjs/preset-sheets-drawing/lib/index.css' // [!code ++]
import '@univerjs/preset-sheets-advanced/lib/index.css' // [!code ++]

const { univerAPI } = createUniver({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      UniverPresetSheetsCoreEnUS,
      UniverPresetSheetsDrawingEnUS, // [!code ++]
      UniverPresetSheetsAdvancedEnUS, // [!code ++]
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsDrawingPreset(), // [!code ++]
    UniverSheetsAdvancedPreset({ // [!code ++]
      universerEndpoint: 'http://localhost:3010', // Univer サーバーのエンドポイント // [!code ++]
    }), // [!code ++]
  ],
})
```

Univer の商用ライセンスをお持ちの場合は、設定方法について [クライアントでのライセンス](/guides/pro/license#in-preset-mode) を参照してください。

### プリセットと設定

`UniverSheetsAdvancedPreset` の設定オプション:

```typescript
interface IUniverSheetsAdvancedPresetConfig {
  // Univer サーバーのエンドポイント
  universerEndpoint?: string
}
```

## プラグインモード

### インストール

```package-install
npm install @univerjs-pro/edit-history-viewer @univerjs-pro/edit-history-loader
```

### 使い方

```typescript
import { UniverEditHistoryLoaderPlugin } from '@univerjs-pro/edit-history-loader' // [!code ++]
import EditHistoryViewerEnUS from '@univerjs-pro/edit-history-viewer/locale/en-US' // [!code ++]
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'

import '@univerjs-pro/edit-history-viewer/lib/index.css' // [!code ++]

const univer = new Univer({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      EditHistoryViewerEnUS, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverEditHistoryLoaderPlugin, { // [!code ++]
  univerContainerId: 'your-univer-container-id', // 履歴ビューをマウントする DOM コンテナー ID // [!code ++]
}) // [!code ++]
```

Univer の商用ライセンスをお持ちの場合は、設定方法について [クライアントでのライセンス](/guides/pro/license#in-plugin-mode) を参照してください。

### プラグインと設定

`UniverEditHistoryLoaderPlugin` の設定オプション:

```typescript
interface IUniverEditHistoryLoaderConfig {
  univerContainerId?: string
  // 履歴一覧のサーバー URL
  historyListServerUrl?: string
}
```

編集履歴を有効化すると、`UniverEditHistoryLoaderPlugin` は新しい Univer インスタンスを読み込み、指定した DOM ノードにマウントします。そのため、登録時には適切な DOM ノードの ID（既存の Univer インスタンスのコンテナーなど）を指定し、履歴パネルが元の Univer パネルの上に表示されるようにしてください。ノード ID を指定しない場合、既定値は `univer-container` です。

履歴一覧のサーバー アドレスを変更する必要がある場合は、`historyListServerUrl` 設定オプションで指定できます。既定値は `/universer-api/history` です。

## 編集履歴用の Univer インスタンスを取得 [#get-edit-history-univer-instance]

<Callout title="補足">
  編集履歴用の Univer インスタンスは、履歴パネルを初めて開いたときにのみ作成されます。
</Callout>

編集履歴用の Univer インスタンスを操作または設定（インターフェースのリクエスト ヘッダーの変更、プラグインの登録など）する必要がある場合は、`HistoryLoaderService` からインスタンスを取得できます。

<Tabs items={['プリセットモード', 'プラグインモード']}>
  <Tab>
    ```typescript
    import { HistoryLoaderService } from '@univerjs/preset-sheets-collaboration'

    const disposable = univerAPI.addEvent(univerAPI.Event.LifeCycleChanged, ({ stage }) => {
      if (stage === univerAPI.Enum.LifecycleStages.Steady) {
        const injector = univer.__getInjector()
        const historyLoaderService = injector.get(HistoryLoaderService)

        historyLoaderService.historyUniver$.subscribe((historyUniver) => {
          // ここで historyUniver インスタンスを操作できます
        })
      }
    })

  // イベント リスナーを削除するには `disposable.dispose()` を使用します
    ```
  </Tab>
  <Tab>
    ```typescript
    import { HistoryLoaderService } from '@univerjs-pro/edit-history-loader'

    const disposable = univerAPI.addEvent(univerAPI.Event.LifeCycleChanged, ({ stage }) => {
      if (stage === univerAPI.Enum.LifecycleStages.Steady) {
        const injector = univer.__getInjector()
        const historyLoaderService = injector.get(HistoryLoaderService)

        historyLoaderService.historyUniver$.subscribe((historyUniver) => {
          if (!historyUniver) return

          // ここで historyUniver インスタンスを操作できます
        })
      }
    })

  // イベント リスナーを削除するには `disposable.dispose()` を使用します
    ```
  </Tab>
</Tabs>

### サードパーティ プラグイン対応

編集履歴用の Univer インスタンスは、既定では公式プラグインのみを読み込みます。業務要件に基づいて開発されたサードパーティの機能プラグインは、`HistoryLoaderService` に登録することで、履歴ビューに正しく表示されます。

```typescript
const injector = univer.__getInjector()
const historyLoaderService = injector.get(HistoryLoaderService)

// [!code focus:4]
// 登録方法は PluginService と同じです。編集履歴用の Univer インスタンスは、生成後に以下の設定に従って対応するプラグインを登録します。
historyLoaderService.registerPlugin(YourPlugin, YourPluginConfig)
// 公式で登録済みのプラグインを再設定する場合は、第 3 引数に true を指定して元の設定を上書きします。
historyLoaderService.registerPlugin(ExamplePlugin, ExamplePluginConfig, true)
```
